<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width: 100px;height: 100px;background: red;position: absolute;left:0;top:0;}
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    class Drag{
        constructor(){
            this.box = document.querySelector(".box");
            this.init();
            this.addEvent();
        }
        init(){
            const obj = localStorage.getItem("obj") ? JSON.parse(localStorage.getItem("obj")) : {};
            this.box.style.left = obj.left + "px";
            this.box.style.top = obj.top + "px";
        }
        addEvent(){
            const that = this;
            this.box.onmousedown = function(eve){
                that.downE = eve || window.event;
                that.down();
            }
        }
        down(){
            const that = this;
            document.onmousemove = function(eve){
                that.moveE = eve || window.event;
                that.move();
            }
            document.onmouseup = function(){
                that.up();
            }
        }
        move(){
            this.box.style.left = this.moveE.pageX - this.downE.offsetX + "px";
            this.box.style.top = this.moveE.pageY - this.downE.offsetY + "px";
        }
        up(){
            document.onmousemove = document.onmouseup = null;

            const obj = {
                left:this.box.offsetLeft,
                top:this.box.offsetTop
            }

            localStorage.setItem("obj", JSON.stringify(obj));

        }
    }

    new Drag();
</script>
</html>